<!doctype html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>box-radius:</title>
<style>
@import url(reset.css);

.view {
  padding: 35px; /* shadow padding */
}
.radius1 {
  color: gold; background-color: blue;
  border: 1em solid navy;
  -uu-border-radius: 20px;
}
.radius2 {
  color: gold; background-color: blue;
  border: 1em solid navy;
  -uu-border-radius: 0 20px;
}
.radius3 {
  color: gold; background-color: blue;
  border: 1em solid navy;
  -uu-border-radius: 0 20px 5px;
}
.radius4 {
  color: gold; background-color: blue;
  border: 1em solid navy;
  -uu-border-radius: 0 20px 5px 10px;
}

</style>
<script type="text/xaml" id="xaml"><?xml version="1.0"?>
  <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<script src="../../uuAltCSS.js"></script>

</head>
<body>
<input type="button" value="revalidate" onclick="uuAltCSS()" />

<hr />
<h2>-uu-border-radius:</h2>



<div class="view">
  <div class="radius1"><pre>
.radius1 {
  color: gold; background-color: blue;
  border: 1em solid navy;
  -uu-border-radius: 20px;
}</pre></div>
</div>


<div class="view">
  <div class="radius2"><pre>
.radius2 {
  color: gold; background-color: blue;
  border: 1em solid navy;
  -uu-border-radius: 0 20px;
}</pre></div>
</div>


<div class="view">
  <div class="radius3"><pre>
.radius3 {
  color: gold; background-color: blue;
  border: 1em solid navy;
  -uu-border-radius: 0 20px 5px;
}</pre></div>
</div>


<div class="view">
  <div class="radius4"><pre>
.radius4 {
  color: gold; background-color: blue;
  border: 1em solid navy;
  -uu-border-radius: 0 20px 5px 10px;
}</pre></div>
</div>



</body>
</html>